<template>
  <div>
    <!--空状态    -->
    <div class="centered-component" v-if="this.auditData.length===0">
      <el-empty description="暂时没有收到领养申请"></el-empty>
    </div>
    <!--展示领养申请的描述列表 -->
    <div>
      <el-row>
        <el-col style="margin-top: 20px" v-for="(audit, index) in auditData" :key="index">
          <el-card shadow="hover">
            <div>
              <el-descriptions :label-width="100" :column="3" title="我收到的领养申请" border>
                <template slot="extra">
                  <el-button type="success" size="small" @click="agree(audit.id)" v-if="audit.applyStatus==='待审核'">同意</el-button>
                  <el-button type="primary" size="small" @click="disagree(audit.id)" v-if="audit.applyStatus==='待审核'">拒绝</el-button>
                </template>
                <el-descriptions-item label="领养人">
                  <template slot="label">
                    <i class="el-icon-user">领养人</i>
                  </template>
                  {{ audit.name }}&nbsp&nbsp<i class="el-icon-view"></i>
                  <el-link type="success" @click="look(audit.petId)">查看宠物详情</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">
                  <template slot="label">
                    <i class="el-icon-watch">申请时间</i>
                  </template>
                  {{ audit.applyTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核状态">
                  <template slot="label">
                    <i class="el-icon-turn-off">审核状态</i>
                  </template>
                  {{ audit.applyStatus }}

                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone">联系电话</i>
                  </template>
                  {{ audit.contact }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-watch">约定时间</i>
                  </template>
                  {{ audit.setTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                  <template slot="label">
                    <i class="el-icon-watch">审核时间</i>
                  </template>
                  {{ audit.okTime }}
                </el-descriptions-item>
                <el-descriptions-item label="申请理由">
                  <template slot="label">
                    <i class="el-icon-postcard">申请理由</i>
                  </template>
                  {{ audit.applyReason }}
                </el-descriptions-item>
                <el-descriptions-item label="约定地点">
                  <template slot="label">
                    <i class="el-icon-office-building">约定地点</i>
                  </template>
                  {{ audit.spot }}
                </el-descriptions-item>
                <el-descriptions-item label="审核意见">
                  <template slot="label">
                    <i class="el-icon-chat-dot-square">审核意见</i>
                  </template>
                  {{ audit.reply }}
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div style="margin-top: 50px">
              事件进度
            </div>

            <el-steps :space="500" :active=audit.progress finish-status="success" style="margin-top: 50px">
              <el-step title="提交申请"></el-step>
              <el-step title="审核"></el-step>
              <el-step title="领养宠物"></el-step>
            </el-steps>

          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--宠物信息的描述列表    -->
    <div>
      <el-dialog title="宠物信息" :visible.sync="dialogTableVisible">
        <el-row>
          <el-col model="Pet">
            <el-card shadow="hover">
              <div style="display: flex">
                <div>
                  <div class="block">
                    <el-image :src="'http://localhost:8080/yyj/files/'+Pet.image"
                              :preview-src-list="['http://localhost:8080/yyj/files/'+Pet.image]"
                              style="height: 150px;width: 120px"></el-image>
                  </div>
                  <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ Pet.currentTime }}
                  </span>
                  </div>
                </div>
                <div>
                  <el-descriptions style="margin-left :20px" title="萌宠信息">
                    <el-descriptions-item label="姓名">{{ Pet.name }}</el-descriptions-item>
                    <el-descriptions-item label="品种">{{ Pet.variety }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ Pet.age }}</el-descriptions-item>
                    <el-descriptions-item label="地址">{{ Pet.address }}</el-descriptions-item>
                    <el-descriptions-item label="介绍">{{ Pet.description }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ Pet.chat }}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
    <!--同意或拒绝时反馈意见    -->
    <div>
      <el-dialog
          title="提示"
          :visible.sync="agreeOrDisagree"
          width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="审核意见">
            <el-input type="textarea" v-model="form.reply"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button type="warning">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import request from "@/utils/request";
export default {
  name: "ReceiveView",
  data() {
    return {
      auditData: [],
      user:localStorage.getItem("user")?(JSON).parse(localStorage.getItem("user")):{},
      Pet: {},
      dialogTableVisible: false,
      form: {},
      agreeOrDisagree: false
    };
  },
  created() {
    this.findReceive(this.user.userId);
  },
  methods: {
    findReceive(userId)
    {
      request.get("/audit/getReceive/"+userId).then(res=>{
        if (res.code === '0') {
          this.auditData = res.data;
        } else {
          this.$message.error("页面加载失败")
        }
      })
    },
    look(petId) {
      this.dialogTableVisible = true;
      //根据宠物id查询
      request.get("/audits/" + petId).then(res => {
        if (res.code === '0') {
          this.Pet = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //同意申请,把申请状态改为同意,并且反馈审核意见
    agree(id) {
      this.form.id = id;
      this.form.applyStatus = '同意';
      this.agreeOrDisagree = true;
      this.form.progress = '2';
    },
    //不同意申请,把申请状态改为拒绝,并且反馈审核意见
    disagree(id) {
      this.form.id = id;
      this.form.applyStatus = '拒绝';
      this.agreeOrDisagree = true;
    },
    onSubmit() {
      //用户修改领养申请的审核状态
      request.post("audit/userAudit",this.form).then(res=>{
        if (res.code === '0') {
          this.$message.success("操作成功");
          this.findReceive(this.user.userId);
          this.agreeOrDisagree = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.centered-component {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
</style>